<template>
  <div class="">
    <Comp>
      <div>默认插槽</div>
      <div>默认插槽</div>
      <div>默认插槽</div>
      <template #slot1>
        <div>具名插槽</div>
      </template>
      <!-- 作用域插槽 使用子组件里面的数据，结构出来到这里使用-->
      <template #slot2="{ msg }">
        <div>
          {{ msg }}
        </div>
      </template>
    </Comp>
  </div>
</template>

<script lang="ts" setup>
import {} from 'vue'
import Comp from './component/comp.js'
// import Comp from './component/comp1.vue'
/**
 * 插槽的本质
 *
 * 可以理解为传递了一个对象到Comp中
 * {
 *    default：function(xxx){},
 *    slot1:   function(xxx){},
 *    slot2:   function(xxx){}
 * }
 * slot2具名插槽，可以接受参数，其它函数是没有接收参数
 * 并且函数的返回值都是一个虚拟节点，可以直接在vue中展示
 */
</script>

<style scoped></style>
